<template>
    <a-modal v-model="visible"
             :title="title"
             @ok="handleOk"
             @cancel="cancel"
             centered
             width="40em"
             :cancelText="cancelText"
             :okText="okText">
        <a-form-model
                ref="form"
                :model="majorRecord"
                :rules="rules"
                :label-col="{ span: 5 }"
                :wrapper-col="{ span: 16 }"
        >
                <!--弹框信息设置-->
                <a-form-model-item label="专业名称" prop="name">
                    <a-input v-model="majorRecord.name"/>       <!--从mock中获取信息-->
                </a-form-model-item>
                <!--设置学院不可修改-->
                <a-form-model-item label="学院名称" prop="collegeName">
                    <a-input disabled="disabled" v-model="majorRecord.collegeName"/><!--从mock中获取信息-->
                </a-form-model-item>
            </a-form-model>
        </a-modal>
</template>

<script>
    import { mapState } from "vuex";
    //没有填写信息的提醒样式
    const rules={
        collegeName:[{}],
        name:[{ required: true, message: '请输入专业名称!',trigger: 'change'}],
    }

    export default {
        name: "AddMajor",
        data() {
            return {
                rules,          //表格检验
                title:'',       //Modal标题
                flag:false,     //判断当前是添加还是编辑
                visible:false,  //Modal是否可见
                cancelText:'',  //取消按钮文字
                okText:'',      //确认按钮文字
                majorRecord:{
                    majorId:'',
                    name:'',
                    collegeName:'',
                },
              majorData:[]
            }
        },
        methods: {
            //表格编辑特定专业--根据记录record，判断是添加专业还是修改专业
            showModel(record){
                this.visible=true;//显示弹框
                //新建专业信息弹框
                if(record==='') {
                    this.title = '新建专业信息';
                    this.cancelText = '取消';
                    this.okText = '添加';
                    this.flag = false;
                    this.majorRecord.name = '';
                    this.majorRecord.collegeName =this.accessState.collegeName;
                }
                //表格中单个的修改专业信息
                else{
                    //设置弹框中的取消、修改、标题的具体显示，在返回的data中是‘’
                    this.title='修改专业信息';
                    this.cancelText='取消';
                    this.okText='修改';
                    this.flag=true;
                    //在专业记录中存储，ID、名称name、学院名称collegeName
                    this.majorRecord.majorId=record.majorId;
                    this.majorRecord.name=record.name;
                    this.majorRecord.collegeName=record.collegeName;
                }
            },
            //确定时回调
            handleOk(){
                if(this.flag===false){
                    //新增专业
                    this.$refs.form.validate(value=>{
                        if(value){//检验为真时，触发
                          //console.log(/.*\d+$/.test(this.majorRecord.name))
                          if((/.*\d+.*$/.test(this.majorRecord.name.trim()))){
                            this.$message.error("专业名称不能包含数字");
                          }else{
                            this.$store.dispatch('classes/getMajors',{
                              collegeId: this.accessState.collegeId, //获取管理员ID（需要改动）
                              grade: ''
                            }).then(res => {
                              //先获取已有的专业名称，看看是否与新增的专业名称冲突
                              let isSimliar=false;
                              for(let i of res.data.majors){
                                if(i===this.majorRecord.name.trim()){
                                  isSimliar=true;
                                }
                              }
                              //console.log(isSimliar)
                              if(!isSimliar){
                                //没有相同的专业名字，则发送新增专业请求
                                this.$store.dispatch("major/addMajor",{majorRecord: this.majorRecord,token:this.accessState.token,collegeId:this.accessState.collegeId})
                                    .then(data=>{
                                      this.$message.success(data.msg);    //成功提醒
                                      this.visible=false;                 //不可见
                                      this.$refs.form.resetFields();      //重置表单
                                      this.$emit("get")             //触发get，由父组件接受
                                    }).catch(err=>{
                                  this.$message.error(err.msg);
                                });
                              }else{
                                //提示已有相同专业名字
                                this.$message.info("专业名称和已有的专业冲突！")
                              }
                            }).catch(err => {
                              this.$message.error(err.msg)
                            })
                          }
                        }else {
                            this.$message.error("请正确填写表单");
                        }
                    })
                }else{
                    //修改专业信息
                    this.$refs.form.validate(value=>{
                        if(value){
                            this.$store.dispatch("major/modifyMajor",{majorRecord:this.majorRecord,token:this.accessState.token})
                                    .then(data=>{
                                if(data.code === 1){
                                    this.$message.success(data.msg);
                                    this.visible=false;             //Modal设为不可见
                                    this.$refs.form.resetFields();  //重置表单数据
                                    this.$emit("gett")        //触发gett，由父组件接受
                                }else{
                                    this.$message.error(data.msg);
                                }
                            }).catch(err=>{
                                this.$message.error(err.msg);
                            });
                        }else {
                            this.$message.error("请正确填写表单");
                        }
                    })
                }
            },
            //取消时回调
            cancel(){
                this.$refs.form.resetFields();//重置表单
                this.visible=false;//Modal设为不可见
            }
        },
        computed: {
            ...mapState({ // 这个是提取store中access文件夹目录下的数据
                'accessState': 'access'
            })
        }
    }
</script>

<style scoped>

</style>
